<template>
  <Portlet title="服务评价" >
    <el-form ref="evaluationForm" class="el-form-col el-form-s" :model="evaluationParam" label-position="left" label-width="130px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="服务评价:" prop="stars">
            <div class="pull-right">
              <i class="fa fa-info-circle font-blue"></i>
              <span v-if="isAbnormal == 1">订单存在异常，需手动确认</span>
              <span v-if="isAbnormal != 1">默认好评: {{autoEvaluationTime | filterDayHours}}</span>
              <p class="text-center">
                (投诉期限15天)
              </p>
            </div>
            <el-rate v-model="evaluationParam.stars"></el-rate>
            <el-form-item label="" prop="tips">
              <el-checkbox-group v-model="evaluationParam.tips">
                <el-checkbox
                  v-for="(item, index) in tipsArr"
                  :key="index"
                  :label="item.text"
                >{{item.text}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="pictures">
            <upload-image v-model="evaluationParam.pictures" :formData="{group: id}" :max="5"></upload-image>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="评价说明:" prop="memo">
            <el-input type="textarea" :rows="2" v-model="evaluationParam.memo" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="text-center">
          <el-button @click.prevent="evaluation($event)" type="primary" :loading="evaluationLoading">确认评价</el-button>
          <!--<el-button @click.prevent="showComplaintModal = true" type="primary">商家投诉</el-button>-->
        </el-col>
      </el-row>
      <complaintModal :visible.sync="showComplaintModal" :id="id"></complaintModal>
    </el-form>
    <div slot="tools" class="tools">
      <a href="javascript:;" class="collapse"></a>
    </div>
  </Portlet>
</template>
<script>
import {copy, dotData, confirm} from '@/utils'
import {filterDayHours} from '@/filters'
import complaintModal from '@/views/fhb/myOrders/components/modal/complaintModal'
export default {
  name: 'goods',
  components: {
    complaintModal
  },
  data() {
    return {
      isAbnormal: '',
      evaluationParam: {
        orderId: this.orderId,
        stars: 5,
        pictures: [],
        memo: '',
        tips: []
      },
      tipsArr: [],
      evaluationLoading: false,
      showComplaintModal: false
    }
  },
  watch: {
    'evaluationParam.stars'(val, oldVal) {
      if (val) {
        this.httpGetTips()
      }
    }
  },
  filters: {
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    },
    autoEvaluationTime: {
      type: [String, Number],
      default: 0
    }
  },
  computed: {
  },
  created() {
    if (this.id) {
      this.$ajax.get('/ms-fahuobao-order/FhbOrder/evaluation-detaile', {orderId: this.id}).then(response => {
        if (response) {
          this.evaluationDetail = response.data
        }
      })
    }
    this.httpGetTips()
  },
  methods: {
    filterDayHours,
    httpGetTips() {
      this.evaluationParam.tips = []
      this.tipsArr = []
      this.$ajax.get('/ms-fahuobao-order/FhbOrder/fhb-tips', {stars: this.evaluationParam.stars}).then(response => {
        this.tipsArr = response.data
      })
    },
    evaluation() {
      let data = copy(this.evaluationParam)
      if (Array.isArray(data.pictures)) {
        data.pictures = data.pictures.join(',')
      }
      if (Array.isArray(data.tips)) {
        data.tips = data.tips.join(',')
      }
      this.evaluationLoading = true
      this.$ajax.post('/ms-terminal-order/bidding/evaluate', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          confirm('评价成功', '提示', {
            type: 'success'
          }).finally(_ => {
            this.evaluationLoading = false
            this.$router.push({path: '/ss-oms/orders/expatriate/confirming/index'})
          })
        } else {
          this.evaluationLoading = false
        }
      }).catch(_ => {
        this.evaluationLoading = false
      })
    }
  }
}
</script>
